<template>
  <div style="height: 88vh">
    <div v-if="rooms" class="rooms">
      <div
        :class="room.open ? 'valid-door' : 'invalid-door'"
        class="door"
        @click="detail(room.open, room.id)"
        v-for="(room, index) of rooms"
        :key="index"
      >
        <span class="name">{{ room.name }}</span>
      </div>
    </div>
    <student-room-detail
      @done="drawer = false"
      @reload="loadRooms"
      v-if="drawer"
      :id="id"
    />
  </div>
</template>

<script>
import ManagerRoomDetail from "@views/Manager/ManagerRoomDetail";
import { getReadingRoom } from "@network/user";
import { mapGetters } from "vuex";
import StudentRoomDetail from "./StudentRoomDetail";
export default {
  components: {
    ManagerRoomDetail,
    StudentRoomDetail,
  },
  data() {
    return {
      create: false,
      drawer: false,
      id: 0,
      rooms: null,
    };
  },
  computed: {
    ...mapGetters(["isStudent"]),
  },
  methods: {
    detail(open, id) {
      if (open) {
        this.id = id;
        this.drawer = true;
      }else{
        this.$message.warning('该阅览室已关闭');
      }
    },
    async loadRooms() {
      await getReadingRoom().then((res) => {
        if (res.data.tag) {
          this.rooms = res.data.rooms;
          console.log(res, "res", this.isStudent);
        } else {
          this.$message.error("获取数据失败,请稍候刷新重试");
        }
      });
    },
  },
  activated() {
    this.loadRooms();
    if (!this.isStudent) {
      this.$router.push({ name: "m_room" });
    }
  },
  mounted() {},
};
</script>
<style scoped>
.rooms {
  display: flex;
  flex-wrap: wrap;
}

.door {
  width: 192px;
  height: 192px;
  padding: 10px 30px;
  box-sizing: border-box;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
  gap: 5px;
}

.valid-door {
  background-image: url("~@img/close_valid.svg");
}

.valid-door:hover {
  background-image: url("~@img/open_valid.svg");
}

.invalid-door {
  background-image: url("~@img/close_invalid.svg");
}

.name {
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  width: 1.2rem;
}
</style>
